<template>
  <div>
      <!-- 把轮播图抽离为一个单独的组件 -->
  <swiper :lunbotu='lunbotu' :full='true'></swiper>
      <!-- 6宫格区域使用了mui中的grid-default.html -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/newslist">
      <!--/home/newslist这样写是为了保证tabbar中的高亮显示，只要路由中能匹配到home就会高亮，并且可以区分是从那个地方跳转的-->
              <img src="../../images/menu1.png" alt="">
              <div class="mui-media-body">新闻资讯</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/photolist">
              <img src="../../images/menu2.png" alt="">
              <div class="mui-media-body">图片分享</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><router-link to="/home/goodlist">
              <img src="../../images/menu3.png" alt="">
              <div class="mui-media-body">商品购买</div></router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img src="../../images/menu4.png" alt="">
              <div class="mui-media-body">留言反馈</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img src="../../images/menu5.png" alt="">
              <div class="mui-media-body">视频专区</div></a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
              <img src="../../images/menu6.png" alt="">
              <div class="mui-media-body">联系我们</div></a></li>
  </ul> 
  </div>
</template>

<script>
import {toast} from 'mint-ui'
//使用组件三步 一导入组件 二组成到当前父组件身上 三在模板中以标签形式调用
import swiper from '../subcomponent/swiper.vue'

export default{//当前的vue文件就是一个模块对象，结构template里面想使用数据必须用export default暴露出去，
//如果其他文件中接收直接用import 自定义 from '文件路径'
//如果是用export导出的使用import {必须原样接收不能自定义} from '文件路径'
 data(){
   return {
     lunbotu:[]
   };
 },
 created(){
   this.getlunbotu()
 },
 methods:{
   getlunbotu(){
    this.$http.get('api/getlunbo').then(result=>{
      if(result.body.status==0){
        this.lunbotu=result.body.message
        toast('ok')
      }else{
        toast('失败')
      }
    })
   }
 },
 components:{
   swiper,
 }
}
</script>

<style lang="scss" scoped>//scoped实现的原理就是给当前的页面的类前面加了一个自定义属性使用属性选择器来标识

.mui-grid-view.mui-grid-9{
        background-color: white;
        .mui-media{
          border:none;
          img{
            width:60px;
            height:60px;
          }
        }
  }
</style>